<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<h1 id="title" class="mui-title">分类</h1>
		</header>
		<div class="mui-content">
			<div class="mui-card">
				<div class="mui-card-header">
					男生
				</div>
				<div class="mui-card-content">
					<ul class="mui-table-view mui-grid-view mui-grid-9" style="background-color: transparent;">
			            <!--<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" style="border: 0px;">
			            	<a href="#">
			                    <h4 class="mui-media-body">玄</h4>
			                    <span>5</span>
			            	</a>
			            </li>-->
			            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" style="border: 0px;"  v-for="item in male">
			            	<a href="#" v-on:click="openWindow('male',item)">
			                    <h4 class="mui-media-body" v-html="item.name" style="border: 0px solid red; padding-top: 5px; height: 24px;">玄</h4>
			                    <span v-html="item.bookCount">5</span>
			            	</a>
			            </li>
			       </ul>
				</div>
		    </div>
		    <div class="mui-card">
				<div class="mui-card-header">
					女生
				</div>
				<div class="mui-card-content">
					<ul class="mui-table-view mui-grid-view mui-grid-9" style="background-color: transparent;">
			            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" style="border: 0px solid red;"  v-for="item in female">
			            	<a href="#" v-on:click="openWindow('female',item)">
			                    <h4 class="mui-media-body" v-html="item.name" style="border: 0px solid red; padding-top: 5px; height: 24px;">玄</h4>
			                    <span v-html="item.bookCount">5</span>
			            	</a>
			            </li>
			      	</ul>
				</div>
		    </div>
		    <div class="mui-card">
				<div class="mui-card-header">
					出版物
				</div>
				<div class="mui-card-content">
					<ul class="mui-table-view mui-grid-view mui-grid-9" style="background-color: transparent;">
			            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" style="border: 0px;"  v-for="item in press">
			            	<a href="#" v-on:click="openWindow('press',item)">
			                    <h4 class="mui-media-body" v-html="item.name" style="border: 0px solid red; padding-top: 5px; height: 24px;">玄</h4>
			                    <span v-html="item.bookCount">5</span>
			            	</a>
			            </li>
			      	</ul>
				</div>
		    </div>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/vue.min.js"></script>
		<script type="text/javascript">
			mui.init()
			
			var vm = new Vue({
				el: '.mui-content',
				data: {
					male:[],female:[],press:[]
				}
			});
			mui.plusReady(function(){
				//请求历史列表信息流
				mui.getJSON("http://api.zhuishushenqi.com/cats/lv2/statistics", {}, function(rsp) {
					console.log(JSON.stringify(rsp));
					if(rsp.ok && rsp.ok == true){
						vm.male = rsp.male;
						vm.female = rsp.female;
						vm.press = rsp.press;
					}
				});
			});
			
			function openWindow(gender,item){
				console.log(JSON.stringify(item));
				
				mui.openWindow({id: 'categorychild.html',url: 'categorychild.html'
					,show: {aniShow: 'pop-in'}
					,extras: {    //extras里面的就是参数了
						gender:gender,
	                	name: item.name,
	           		}
					,waiting: {
						autoShow: true, //自动显示等待框，默认为true
	           		}
  				});
			}
		</script>
	</body>

</html>